import { Avatar, Button, Dropdown, Space } from 'antd'
import type { MenuProps } from 'antd'
import React, { lazy, useEffect } from 'react'
import defineUserStore from '@/stores/user'
import { NavLink } from 'react-router-dom'
const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <Space direction={'vertical'} style={{ width: '100px' }}>
        <a>xcx</a>
        <span>系统管理员</span>
      </Space>
    )
  }
]
const currentUserRole = {}

const XAvatar: React.FC = () => {
  const loginByToken = defineUserStore((state) => state.loginByToken)
  const username = defineUserStore((state) => state.username)
  const isLogin = defineUserStore((state) => state.isLogin)
  const avatarUrl = defineUserStore((state) => state.avatarUrl)
  useEffect(() => {
    loginByToken()
  }, [])
  return (
    <>
      {isLogin ? (
        <Space>
          <Dropdown menu={{ items }}>
            <a>hell</a>
          </Dropdown>
          <Avatar src={avatarUrl} size={48} />
        </Space>
      ) : (
        <NavLink to={'/login'} className={'module-link'}>
          login
        </NavLink>
      )}
    </>
  )
}

export default XAvatar
